<template>
	<view class="main-cont">
		<view class="content">
			<view class="box box-tb box-align-center box-pack-center">
				<view class="login-tip">
					欢迎加入[{{form.schoolName}}]
				</view>
				<view class="name mt20">
					请完善您的信息
				</view>

				<u-form :model="form" ref="uForm">
					<view class="box box-tb box-pack-center box-align-center mt66">
						<u-form-item prop="phone">
							<view class="list box box-tb box-align-center box-pack-start">
								<view class="box box-align-center box-pack-start items">
									<u-image src="@/static/class/icon_phone.png" width="32rpx" height="36rpx"
										class="posa box box-align-center">
										<u-loading slot="loading"></u-loading>
									</u-image>
									<u-input v-model="form.phone" maxlength="11" type="text" :border="border"
										:custom-style="customStyles" placeholder="手机号" />
									<u-button size="medium" open-type="getPhoneNumber" :ripple="true"
										@getphonenumber="getPhoneNumber" :custom-style="btnOpen">自动获取</u-button>
								</view>
							</view>
						</u-form-item>
						<u-form-item prop="userName">
							<view class="list box box-tb box-align-center box-pack-start">
								<view class="box box-align-center box-pack-start items">
									<u-image src="@/static/class/icon_user.png" width="32rpx" height="36rpx"
										class="posa box box-align-center">
										<u-loading slot="loading"></u-loading>
									</u-image>
									<u-input v-model="form.userName" type="text" :border="border"
										:custom-style="customStyles" placeholder="姓名" />
									<u-button size="medium" :ripple="true"
										@click="getUserProfile" :custom-style="btnOpen">获取</u-button>
								</view>
							</view>
						</u-form-item>
						<u-form-item prop="zydm">
							<view class="list box box-align-center box-pack-start" @click="goSearchZy()">
								<u-image src="@/static/class/icon_school.png" width="47rpx" height="33rpx"
									class="posa box box-align-center">
									<u-loading slot="loading"></u-loading>
								</u-image>
								<u-input v-model="form.zymc" type="text" :disabled="true" :border="border"
									:custom-style="customStyles" placeholder="选择专业" @click="goSearchZy()" />
								<u-image src="@/static/class/iocn_pulldown.png" width="32rpx" height="32rpx"
									class="posa box box-align-center">
									<u-loading slot="loading"></u-loading>
								</u-image>
							</view>
						</u-form-item>
						<u-form-item prop="bjdm" v-if="form.selectedrole==2">
							<view class="list box box-align-center box-pack-start" @click="goSearchClass()">
								<u-image src="@/static/class/icon_classgroup.png" width="35rpx" height="33rpx"
									class="posa box box-align-center">
									<u-loading slot="loading"></u-loading>
								</u-image>
								<u-input v-model="form.bjmc" type="text" :disabled="true" :border="border"
									:custom-style="customStylecs" placeholder="选择班级" @click="goSearchClass()" />
								<u-image src="@/static/class/iocn_pulldown.png" width="32rpx" height="32rpx"
									class="posa">
									<u-loading slot="loading"></u-loading>
								</u-image>
							</view>
						</u-form-item>
					</view>
				</u-form>
				<u-button :custom-style="loginbtnCustomStyle" :ripple="true" ripple-bg-color="#b0c1ff" :loading="btnloading==true" @click="dosubmit">提 交</u-button>
				<div @click="goindex" style="margin-top: 10px;" v-show="showindex">去登录</div>
			</view>
		</view>

		<!-- 选择专业弹层 -->
		<u-popup v-model="showpop" mode="bottom" border-radius="14" height="65%">
			<view class="main-cont box box-tb box-pack-start box-align-center">
				<view class="lists box box-align-center box-pack-start mt20">
					<u-input v-model="searchText" type="text" :border="border" :custom-style="customStyleInput"
						placeholder="搜索专业" />
					<u-image src="@/static/class/icon_search.png" width="34rpx" height="34rpx" @click="zylist">
						<u-loading slot="loading"></u-loading>
					</u-image>
				</view>

				<view class="padd20 school" v-if="page.list.length !=0">
					<view class="ite" v-for="(item,index) in page.list" :key="index" @click="doselectzy(item)">
						{{item.zymc}}
					</view>
				</view>
				<view style="height: 100%;" v-else>
					<u-empty text="暂无专业" mode="list"></u-empty>
				</view>
			</view>
		</u-popup>

		<!-- 选择班级弹层 -->
		<u-popup v-model="classshowpop" mode="bottom" border-radius="14" height="65%">
			<view class="main-cont box box-tb box-pack-start box-align-center">
				<view class="lists box box-align-center box-pack-start mt20">
					<u-input v-model="searchText2" type="text" :border="border" :custom-style="customStyleInput"
						placeholder="搜索班级" />
					<u-image src="@/static/class/icon_search.png" width="34rpx" height="34rpx" @click="bjlist">
						<u-loading slot="loading"></u-loading>
					</u-image>
				</view>

				<view class="padd20 school" v-if="page2.list.length !=0">
					<view class="ite" v-for="(item,index) in page2.list" :key="index" @click="doselectbj(item)">
						{{item.bjmc}}
					</view>
				</view>
				<view style="height: 100%;" v-else>
					<u-empty text="暂无班级" mode="list"></u-empty>
				</view>
			</view>
		</u-popup>

		<u-toast ref="uToast" />
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showpop: false,
				classshowpop: false,
				form: {
					schoolId: "",
					schoolName: "",
					userName: "",
					phone: "",
					zydm: "",
					zymc: "",
					bjdm: "",
					bjmc: "",
					selectedrole: ""
				},
				codeShow: false,
				token: uni.getStorageSync('user'),
				customStyle: {
					padding: "40rpx",
					color: "#fff"
				},
				customStyles: {
					padding: "0 60rpx 0 40rpx",
					color: "#fff"
				},
				customStylecs: {
					padding: "0 60rpx 0 52rpx",
					color: "#fff"
				},
				customStyleSfzh: {
					width: "190px",
					padding: "40rpx",
					color: "#fff"
				},
				placeholderStyle: {
					color: "#fff"
				},
				time: null,
				loginbtnCustomStyle: {
					width: '560rpx',
					height: '86rpx',
					lineHeight: '86rpx',
					background: 'linearGradient(0deg, #DFE2F5, #FFFFFF)',
					boxShadow: '0px 14rpx 40rpx 0px #626BF1',
					borderRadius: '43rpx',
					fontSize: '34rpx',
					textAlign: 'center',
					color: '#858bec',
					fontWeight: '600',
					marginTop: '150rpx'
				},

				btnloading: false,
				authcode: '',
				btnOpen: {
					width: '180rpx',
					height: '70rpx',
					lineHeight: '70rpx',
					backGround: 'linear-gradient(0deg, #DFE2F5, #FFFFFF)',
					borderRadius: '35rpx',
					textAlign: 'center',
					color: '#626BF1',
					fontSize: '24rpx',
					padding: '0 20rpx'
				},
				searchText: '',
				page: {
					pageNum: 1
				},
				searchText2: '',
				page2: {
					pageNum: 1
				},
				rules: {
					phone: [{
						required: true,
						message: '请输入手机号',
						trigger: ['change', 'blur'],
					}],
					userName: [{
						required: true,
						message: '请输入姓名',
						trigger: ['change', 'blur'],
					}],
					zydm: [{
						required: true,
						message: '请选择专业',
						trigger: ['change', 'blur'],
					}],
					bjdm: [{
						required: true,
						message: '请选择班级',
						trigger: ['change', 'blur'],
					}],
				},
				customStyleInput: {
					width: "560rpx",
					padding: "40rpx",
					color: "#000"
				},
				openid: '',
				unionid: '',
				icon:'',
				showindex:false
			}
		},
		onLoad: function(options) {
			console.log(options);
			this.form.schoolId = options.schoolid;
			this.form.schoolName = options.schoolname;
			this.form.selectedrole = options.selectedrole;
			this.form.zydm = options.zydm;
			this.form.zymc = options.zymc;
			this.getUnionidOnly()
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			
			getUnionidOnly() {
				console.log('>>>')
				wx.login({
					success: res => {
						this.$api.post({
							url: '/comm/getAppletUnionid'
						}, {
							code: res.code
						}).then(s => {
							this.openid = s.openid;
							this.unionid = s.unionid;
							this.icon = s.user.icon
						})
					}
				})
			},
			dosubmit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						let params = {
							schoolid: this.form.schoolId,
							zydm: this.form.zydm,
							bjdm: this.form.bjdm,
							phone: this.form.phone,
							name: this.form.userName,
							icon: this.icon,
							appletopenid: this.openid,
							unionid: this.unionid,
							type: this.form.selectedrole
						}
						console.log(this.form.selectedrole)
						if (this.form.selectedrole == 1) {//老师加入
							this.$api.post({url: '/sysuser/join'}, params).then(res => {
								if (res.code == 'joined') {
									this.showindex=true;
									this.$refs.uToast.show({ title: res.msg, type: 'warning',  icon: 'warning' });
								}else{
									this.$refs.uTips.show({title: '您已成功加入！',type: 'success',duration: '2300'});
									setTimeout(() => {this.tohome();}, 2300);
								}
							})
						}else if(this.form.selectedrole == 2){
							this.$api.post({url: '/sysuser/joinstu'}, params).then(res => {
								if (res.code == 'joined') {
									this.showindex=true;
									this.$refs.uToast.show({ title: res.msg, type: 'warning',  icon: 'warning' });
								}else{
									this.$refs.uTips.show({title: '您已成功加入！',type: 'success',duration: '2300'});
									setTimeout(() => {this.tostuhome();}, 2300);
								}
							})
						}
						
					} else {
						console.log('验证失败');
					}
				});
			},
			tohome(){
				uni.reLaunch({url: '/pages/home/home?createclass=yes'})
			},
			tostuhome(){
				uni.reLaunch({url: '/pageHome/stuhome/home'})
			},
			doselectzy(zy) {
				this.form.zydm = zy.zydm;
				this.form.zymc = zy.zymc;
				this.showpop = false;
				this.form.bjdm = '';
				this.form.bjmc = '';
			},
			doselectbj(bj) {
				this.form.bjdm = bj.bjdm;
				this.form.bjmc = bj.bjmc;
				this.classshowpop = false;
			},
			bjlist() {
				let params = {
					schoolid: this.form.schoolId,
					searchText: this.searchText2,
					zydm: this.form.zydm,
					pageNum: this.page2.pageNum
				}
				this.$api.post({
					url: '/dclass/pagebjlist'
				}, params).then(res => {
					if                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 (res.code == 0) {
						this.page2 = res.page;
					}
				})
			},
			zylist() {
				let params = {
					searchText: this.searchText,
					schoolid: this.form.schoolId,
					pageNum: this.page.pageNum
				}
				this.$api.post({
					url: '/dzy/zypagelist'
				}, params).then(res => {
					if (res.code == 0) {
						this.page = res.page;
					}
					console.log(this.page.list)
				})
			},
			goSearchClass() {
				this.bjlist();
				this.classshowpop = true;
				// uni.navigateTo({
				// 	url: '/team/tr/selectBj'
				// })
			},
			goSearchZy() {
				this.zylist();
				this.showpop = true;
				// uni.navigateTo({
				// 	url: '/team/tr/selectZy?schoolid='+this.form.schoolId
				// })
			},
			//获取手机号
			getPhoneNumber(e) {
				uni.login({
					provider: 'weixin',
					success: (res) => {
						let opts = {
							url: '/comm/getPhoneFromApplet',
							method: 'post'
						};
						let param = {
							encryptedData: e.detail.encryptedData,
							iv: e.detail.iv,
							code: res.code
						};
						this.$api.post(opts, param).then(resp => {
							console.log(resp);
							this.form.phone = resp.phoneNumber;
						})
					}
				})
			},
			getUserProfile(e) {
				uni.getUserProfile({
					desc: '用于更改个人信息',
					success: (res) => {
						console.log(res)
						this.icon = res.userInfo.avatarUrl;
						this.form.userName = res.userInfo.nickName
					}
				})
				// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
				// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
			},
			goindex(){
				wx.vibrateShort();
				uni.navigateTo({url:'../../pages/index/index'});
			}
		}
	}
</script>

<style scoped lang="scss">
	.mt66 {
		margin-top: 66rpx;
	}

	.mt150 {
		margin-top: 150rpx;
	}

	.main-cont {
		width: 100%;
		height: 100%;
	}

	.content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: url(https://yh-sys.oss-cn-beijing.aliyuncs.com/6B9AF39796704A5CB130FC9C0CFB7A28icon_bg.png?Expires=4799124463&OSSAccessKeyId=LTAI4GL8SwAiLh3sSPXDS7z9&Signature=3z2ea85buEEsjoSlp5uw2FIOMoo%3D) no-repeat;
		background-size: 100%;
		color: #fff;
		background-color: #888bf3;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		/* color: #8f8f94; */
		color: $u-type-warning;
	}

	.login-tip {
		font-size: 36rpx;
	}

	.name {
		font-size: 42rpx;
		font-weight: 600;
	}

	.login-btn {
		width: 560rpx;
		height: 86rpx;
		line-height: 86rpx;
		background: linear-gradient(0deg, #DFE2F5, #FFFFFF);
		box-shadow: 0px 14rpx 40rpx 0px #626BF1;
		border-radius: 43rpx;
		font-size: 34rpx;
		text-align: center;
		color: #626BF1;
		font-weight: 600;
	}

	.list {
		padding: 0 3rpx 0 34rpx;
		position: relative;
		width: 560rpx;
		height: 78rpx;
		background: #6E75F1;
		border: 2rpx solid #E9EAFF;
		border-radius: 39rpx;

		.items {
			width: 100%;
			height: 100%;
		}

		.tips {
			margin-top: 10rpx;
			width: 100%;
			margin-left: 20rpx;
			font-size: 20rpx;
			color: #D5D9F5;
		}

		.send-code {
			width: 230rpx;
			height: 70rpx;
			line-height: 70rpx;
			background: linear-gradient(0deg, #DFE2F5, #FFFFFF);
			border-radius: 35rpx;
			text-align: center;
			color: #626BF1;
			font-size: 24rpx;
		}

		&:nth-child(4) {
			padding-right: 5rpx;
		}
	}

	.lists {
		width: 710rpx;
		height: 86rpx;
		background: #F3F4FB;
		border-radius: 43rpx;
	}

	.school {
		width: 100%;
	}

	.ite {
		width: 100%;
		height: 95rpx;
		line-height: 95rpx;
		color: #2F3142;
		font-size: 30rpx;
		text-align: left;
	}
</style>
